<template>
    <div class="modelBase">
        <ul class="modelBaseUl" v-if="pageData && pageData.data.length">
            <li class="modelBaseLi" v-for="item in pageData.data" :key="item.name" :title="item.name" @click="clickModelBase(item)">
                <div class="modelBaseIcon" :style="{ background: item.bgColor }">
                    <img :src="item.img" class="modelBaseImages" alt="" />
                </div>
                <div class="modelBaseName">{{ item.name }}</div>
            </li>
        </ul>
        <div class=""></div>
    </div>
</template>
<script>
import { modelBase } from '../../utils/modelBase'
export default {
    name: 'modelBaseElement',
    // props: ['type'],
    data() {
        return {
            pageData: ''
        }
    },
    computed: {
        type() {
            return this.$store.state.measure.type
        }
    },
    watch: {
        type(newData) {
            this.getPageData()
        }
    },
    mounted() {
        this.getPageData()
    },
    methods: {
        getPageData() {
            // console.log(this.type)
            modelBase().then(res => {
                res.forEach(item => {
                    if (item.type == this.type) {
                        this.pageData = item
                        // console.log(item)
                    }
                })
            })
        },
        clickModelBase(item){
            this.$emit('clickModelBase', item)
        }
        // toggleSelectInputNotShow() {
        //     this.$emit('toggleSelectInputNotShow')
        // }
    }
}
</script>
<style lang="scss" scoped>
.modelBase {
    width: 100%;
    .modelBaseUl {
        padding-left: 0;
        margin: 0;
        .modelBaseLi {
            display: inline-block;
            width: 33%;
            cursor: pointer;
            margin-bottom: 10px;
            text-align: center;
            padding-top: 12px;
            .modelBaseIcon {
                border-radius: 100%;
                width: 50px;
                height: 50px;
                background: #fd960f;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                .modelBaseImages {
                    width: 24px;
                    height: 24px;
                    margin: 13px;
                }
            }
            .modelBaseName {
                color: #ffffff;
                font-size: 12px;
                margin-top: 10px;
            }
        }
    }
}
</style>
